import React, { Component } from 'react';

import {
  Col,
  Table,
  Space,
  Row,
  Form,
  message,
  Input,
  Button,
  Radio,
} from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import 'antd/dist/antd.css';

import { getDictionaryLabel } from '../../../rudexRou/OperatesCookie.js';
import { confirmDeptByCode, getUrl } from '../../../utils';

import {
  getEmpNoOrEmpName,
  getExaminers,
  getBindExaminerDetail,
  bindExaminers,
  bindExaminersAgain,
} from '../../../api3';

import AdvancedSearchForm from '../../../componentJsx/common/searchForm';
import HasPermi from '../../../componentJsx/common/hasPermi';
import NewModal from '../../../componentJsx/common/NewModal';
import '../../../componentCss/component.css';
//import '../index.css';

export default class SetReader extends Component {
  constructor(props) {
    super(props);
    this.state = {
      examData: {},
      notBindTableData: [],
      notBindTableCols: [
        {
          title: '工号',
          dataIndex: 'empNo',
          key: 'empNo',
          width: 80,
          fixed: 'left',
          ellipsis: true,
        },
        {
          title: '姓名',
          dataIndex: 'empName',
          key: 'empName',
          width: 100,
          ellipsis: true,
          fixed: 'left',
        },
        {
          title: '地域',
          dataIndex: 'regionName',
          key: 'regionName',
          ellipsis: true,
          width: 100,
        },
        {
          title: '部门BD',
          dataIndex: 'orgBdName',
          key: 'orgBdName',
          ellipsis: true,
          width: 240,
        },
        {
          title: '部门BU',
          dataIndex: 'orgBuName',
          key: 'orgBuName',
          ellipsis: true,
          width: 240,
        },
        {
          title: '部门CU',
          dataIndex: 'orgCuName',
          key: 'orgCuName',
          ellipsis: true,
          width: 240,
        },
        {
          title: '阅卷状态',
          dataIndex: 'markingStatus',
          key: 'markingStatus',
          ellipsis: true,
          width: 100,
          render: (text) =>
            text === 0 || text
              ? getDictionaryLabel('markingStatus', text.toString())
              : text,
        },
        {
          title: '操作',
          dataIndex: '操作',
          key: '操作',
          align: 'center',
          width: 60,
          fixed: 'right',
          render: (t, r) => {
            return (
              <HasPermi
                bottonData={{
                  type: 'link',
                  size: 'small',
                  interceptor: 'tmfsExamPlatform:practiceManagement:setReader',
                  clickFn: () => this.showModal(r.id, 'bind'),
                  text: '绑定',
                  disabled:
                    (this.state.checkedReader &&
                      r.empNo === this.state.checkedReader.empNo) ||
                    r.markingStatus == 1,
                }}
              />
            );
          },
        },
      ],
      notBindTableLoading: false,
      notBindRows: [],
      notBindRowKeys: [],
      notBindTotal: 0,
      notBindPageSize: 10,
      notBindPage: 1,
      bindTableData: [],
      bindTableCols: [
        {
          title: '工号',
          dataIndex: 'empNo',
          key: 'empNo',
          width: 80,
          fixed: 'left',
          ellipsis: true,
        },
        {
          title: '姓名',
          dataIndex: 'empName',
          key: 'empName',
          width: 100,
          ellipsis: true,
          fixed: 'left',
        },
        {
          title: '地域',
          dataIndex: 'regionName',
          key: 'regionName',
          ellipsis: true,
          width: 100,
        },
        {
          title: '部门BD',
          dataIndex: 'orgBdName',
          key: 'orgBdName',
          ellipsis: true,
          width: 240,
        },
        {
          title: '部门BU',
          dataIndex: 'orgBuName',
          key: 'orgBuName',
          ellipsis: true,
          width: 240,
        },
        {
          title: '部门CU',
          dataIndex: 'orgCuName',
          key: 'orgCuName',
          ellipsis: true,
          width: 240,
        },
        {
          title: '阅卷人',
          dataIndex: 'examinerName',
          key: 'examinerName',
          ellipsis: true,
          width: 100,
          render:(text)=>text?text:"系统"

        },
        {
          title: '阅卷状态',
          dataIndex: 'markingStatus',
          key: 'markingStatus',
          ellipsis: true,
          width: 100,
          render: (text) =>
            text === 0 || text
              ? getDictionaryLabel('markingStatus', text.toString())
              : text,
        },
        {
          title: '操作',
          dataIndex: '操作',
          key: '操作',
          width: 100,
          align: 'center',
          fixed: 'right',
          render: (t, r) => {
            return (
              <HasPermi
                bottonData={{
                  type: 'link',
                  size: 'small',
                  interceptor: 'tmfsExamPlatform:practiceManagement:setReader',
                  clickFn: () => this.showModal(r.id, 'change', r),
                  text: '重绑阅卷人',
                  disabled:
                    (this.state.checkedReader &&
                      r.empNo === this.state.checkedReader.empNo) ||
                    r.markingStatus == 1,
                }}
              />
            );
          },
        },
      ],
      bindTableLoading: false,
      bindRows: [],
      bindRowKeys: [],
      bindTotal: 0,
      bindPageSize: 10,
      bindPage: 1,
      searchData: {},
      searchBindData: {},

      searchForm: [
        {
          type: 'input',
          name: '工号/姓名',
          code: 'str',
          placeholder: '工号/姓名',
          maxLength: 20,
        },
        {
          type: 'select',
          name: '地域',
          code: 'regionNo',
          options: getDictionaryLabel('addressConfig'),
        },
        {
          type: 'cascader',
          name: '部门',
          code: 'dept',
          options: JSON.parse(
            localStorage.getItem('deptList')
              ? localStorage.getItem('deptList')
              : '[]'
          ),
        },
      ],
      searchEmpColumns: [
        {
          title: '工号',
          dataIndex: 'empNo',
          key: 'empNo',
          width: 80,
          fixed: 'left',
          ellipsis: true,
        },
        {
          title: '姓名',
          dataIndex: 'empName',
          key: 'empName',
          width: 100,
          ellipsis: true,
          fixed: 'left',
        },
        {
          title: '地域',
          dataIndex: 'regionName',
          key: 'regionName',
          ellipsis: true,
          width: 100,
        },
        // {
        //   title: '部门',
        //   dataIndex: 'orgName',
        //   key: 'orgName',
        //   ellipsis: true,
        //   width: 220,
        // },
        {
          title: '部门BD',
          dataIndex: 'orgBdName',
          key: 'orgBdName',
          ellipsis: true,
          width: 200,
        },
        {
          title: '部门BU',
          dataIndex: 'orgBuName',
          key: 'orgBuName',
          ellipsis: true,
          width: 200,
        },
        {
          title: '部门CU',
          dataIndex: 'orgCuName',
          key: 'orgCuName',
          ellipsis: true,
          width: 200,
        },
      ],
      searchEmpModalVisible: false,
      modalVisible: false,
      empNo: -1,
      searchSelectedRowKeys: [],
      searchSelectedRows: [],
      searchTotal: 0,
      searchCurrentPage: 1,
      searchLoading: false,
      readerList: [],
      addReaderList: [],
      checkedReader: null,
      empInfoList: [],
      bindStatus: null,
      confirmLoading: false,
    };
  }
  searchForm = React.createRef();
  readerForm = React.createRef();

  showModal = (empNo, bindStatus, record) => {
    if (bindStatus == 'change') {
      if (empNo == -1 && this.state.bindRowKeys.length == 0) {
        return message.warning('请选择需要绑定的员工');
      } else if (empNo != -1) {
        empNo = empNo;
      }
    } else {
      if (empNo == -1 && this.state.notBindRowKeys.length == 0) {
        return message.warning('请选择需要绑定的员工');
      }
    }
    if (!this.state.checkedReader) {
      return message.warning('请选择阅卷人');
    }
    this.setState({ modalVisible: true, empNo: empNo, bindStatus });
  };
  showSearchModal = () => {
    this.setState({ searchEmpModalVisible: true });
  };
  hiddenModal = () => {
    this.setState({
      modalVisible: false,
      searchEmpModalVisible: false,
      empNo: -1,
      searchSelectedRowKeys: [],
      searchSelectedRows: [],
      searchTotal: 0,
      searchCurrentPage: 1,
      empInfoList: [],
      bindStatus: null,
      confirmLoading: false,
    });
  };
  execSearch = (data) => {
    this.setState({ searchData: data, notBindPage: 1 }, () => {
      this.getNotBindEmp();
    });
  };
  bindSearch = (data) => {
    this.setState({ searchBindData: data, bindPage: 1 }, () => {
      this.getBindEmp();
    });
  };
  searchEmpInfo = (value) => {
    if (value) {
      this.setState({
        searchLoading: true,
        searchSelectedRowKeys: [],
        searchSelectedRows: [],
      });
      const param = {
        empNoOrEmpName: value,
        pageSize: 10,
        currentPage: this.state.searchCurrentPage,
      };
      getEmpNoOrEmpName(param)
        .then((res) => {
          if (res.data.code === 200) {
            if (res.data.data.list.length > 0) {
              // res.data.data.list.forEach((item) => {
              //   // item.remark = item.permissions ? "" : "无操作权限";
              //   item.orgName =
              //     item.orgCuName || item.orgBuName || item.orgBdName;
              // });
              this.setState({
                searchLoading: false,
                empInfoList: res.data.data.list,
                searchTotal: res.data.data.total,
              });
            } else {
              this.setState({
                searchLoading: false,
                empInfoList: [],
                searchTotal: res.data.data.total,
              });
              message.warning('没有查询到相关人员信息');
            }
          } else {
            this.setState({
              searchLoading: false,
            });
            message.error('查询失败');
          }
        })
        .catch((err) => {
          this.setState({
            searchLoading: false,
          });
          message.error('查询失败');
        });
    } else {
      message.warning('请输入员工工号或姓名');
    }
  };
  checkEmpToReader = () => {
    if (this.state.searchSelectedRowKeys.length == 0) {
      return message.warning('请搜索并选择需要添加的阅卷人');
    }
    let addReaderList = { ...this.state.searchSelectedRows[0] };
    for (let i = 0; i < this.state.addReaderList.length; i++) {
      if (addReaderList.empNo == this.state.addReaderList[i].empNo) {
        return message.warning('请勿重复添加');
      }
    }
    for (let i = 0; i < this.state.readerList.length; i++) {
      if (addReaderList.empNo == this.state.readerList[i].empNo) {
        return message.warning('请勿重复添加');
      }
    }
    this.setState(
      {
        addReaderList: [
          ...this.state.addReaderList,
          {
            empNo: addReaderList.empNo,
            empName: addReaderList.empName,
            id: null,
            orgBdName: addReaderList.orgBdName,
            orgBgName: addReaderList.orgBgName,
            orgBuName: addReaderList.orgBuName,
            orgCuName: addReaderList.orgCuName,
            regionName: addReaderList.regionName,
          },
        ],
        checkedReader: {
          empNo: addReaderList.empNo,
          empName: addReaderList.empName,
        },
      },
      () => {
        this.hiddenModal();
        this.readerForm.current.setFieldsValue({ reader: addReaderList.empNo });
      }
    );
  };
  getReader = () => {
    let data = {};
    data.examId = this.state.examData.id;
    getExaminers(data)
      .then((res) => {
        if (res.data.code == 200) {
          this.setState({ readerList: res.data.data });
        } else {
          message.error(res.data.message || '阅卷人查询失败');
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };
  checkReader = (e) => {
    let empNo = e.target.value;
    let empName = null;
    for (const key in this.state.addReaderList) {
      if (this.state.addReaderList[key].empNo == empNo)
        empName = this.state.addReaderList[key].empName;
    }
    for (const key in this.state.readerList) {
      if (this.state.readerList[key].empNo == empNo)
        empName = this.state.readerList[key].empName;
    }
    this.setState({ checkedReader: { empNo, empName } });
  };
  getNotBindEmp = () => {
    this.setState({ notBindTableLoading: true });
    let searchData = this.state.searchData;
    let data = {};
    for (const key in searchData) {
      if (searchData[key] || searchData[key] === 0) {
        if (key == 'str') {
          data.empNoOrName = searchData.str;
          // checkAllNumber(searchData.str)
          //   ? (data.empNo = searchData.str)
          //   : (data.empName = searchData.str);
        } else if (key === 'dept') {
          const orgType = confirmDeptByCode(
            searchData[key][searchData[key].length - 1]
          );
          if (orgType && orgType.type == 'cu') {
            data.orgCuNo = orgType.value;
          } else if (orgType && orgType.type == 'bu') {
            data.orgBuNo = orgType.value;
          } else if (orgType && orgType.type == 'bd') {
            data.orgBdNo = orgType.value;
          }
        } else {
          data[key] = searchData[key];
        }
      }
    }
    data.currentPage = this.state.notBindPage;
    data.pageSize = this.state.notBindPageSize;
    data.examId = this.state.examData.id;
    data.alreadyBind = 0;
    // console.log(data);
    // return;
    getBindExaminerDetail(data)
      .then((res) => {
        // console.log(res.data);
        if (res.data.code == 200) {
          this.setState({
            notBindTableData: res.data.data.list,
            notBindTotal: res.data.data.total,
            notBindTableLoading: false,
            notBindRowKeys: [],
            notBindRows: [],
          });
        } else {
          message.error(res.data.message || '查询失败');
          this.setState({ notBindTableLoading: false });
        }
      })
      .catch((err) => {
        message.error('查询失败');
        this.setState({ notBindTableLoading: false });
      });
  };
  getBindEmp = () => {
    this.setState({ bindTableLoading: true });
    let searchData = this.state.searchBindData;
    let data = {};
    for (const key in searchData) {
      if (searchData[key] || searchData[key] === 0) {
        if (key == 'str') {
          data.empNoOrName = searchData.str;
          // checkAllNumber(searchData.str)
          //   ? (data.empNo = searchData.str)
          //   : (data.empName = searchData.str);
        } else if (key === 'dept') {
          const orgType = confirmDeptByCode(
            searchData[key][searchData[key].length - 1]
          );
          if (orgType && orgType.type == 'cu') {
            data.orgCuNo = orgType.value;
          } else if (orgType && orgType.type == 'bu') {
            data.orgBuNo = orgType.value;
          } else if (orgType && orgType.type == 'bd') {
            data.orgBdNo = orgType.value;
          }
        } else {
          data[key] = searchData[key];
        }
      }
    }
    data.currentPage = this.state.bindPage;
    data.pageSize = this.state.bindPageSize;
    data.examId = this.state.examData.id;
    data.alreadyBind = 1;
    // console.log(data);
    // return;
    getBindExaminerDetail(data)
      .then((res) => {
        // console.log(res.data);
        if (res.data.code == 200) {
          this.setState({
            bindTableData: res.data.data.list,
            bindTotal: res.data.data.total,
            bindTableLoading: false,
            bindRowKeys: [],
            bindRows: [],
          });
        } else {
          this.setState({ bindTableLoading: false });
          message.error(res.data.message || '查询失败');
        }
      })
      .catch((err) => {
        this.setState({ bindTableLoading: false });
        message.error('查询失败');
      });
  };
  setReader = () => {
    if (!this.state.checkedReader) return message.warning('请选择阅卷人');
    this.setState({ confirmLoading: true });
    let empList = [];
    let data = [];
    if (this.state.bindStatus == 'change') {
      if (this.state.empNo != -1) {
        empList = [this.state.empNo];
        data.empList = empList;
        data.examinerEmpNo = this.state.checkedReader.empNo;
      } else {
        empList = [...this.state.bindRowKeys];
        data.empList = empList;
        data.examinerEmpNo = this.state.checkedReader.empNo;
      }
      this.bindExaminersAgain(data);
    } else {
      if (this.state.empNo != -1) {
        empList = [this.state.empNo];
        data.empList = empList;
        // data.examId = this.state.examData.id;
        data.examinerEmpNo = this.state.checkedReader.empNo;
      } else {
        for (const i of this.state.notBindRows) {
          empList.push(i.id);
        }
        data.empList = empList;
        // data.examId = this.state.examData.id;
        data.examinerEmpNo = this.state.checkedReader.empNo;
      }
      this.bindExaminersAgain(data);
    }
  };
  bindExaminers = (data) => {
    bindExaminers(data)
      .then((res) => {
        if (res.data.code == 200) {
          message.success('绑定成功');
          this.setState({
            bindRows: [],
            bindRowKeys: [],
            notBindRows: [],
            notBindRowKeys: [],
            notBindPage: 1,
            bindPage: 1,
          });
          this.hiddenModal();
          this.getBindEmp();
          this.getNotBindEmp();
        } else {
          message.error(res.data.message || '绑定失败');
          this.hiddenModal();
        }
      })
      .catch((err) => {
        message.error('绑定失败');
        this.hiddenModal();
      });
  };
  bindExaminersAgain = (data) => {
    bindExaminersAgain(data)
      .then((res) => {
        if (res.data.code == 200) {
          message.success('绑定成功');
          this.setState({
            bindRows: [],
            bindRowKeys: [],
            notBindRows: [],
            notBindRowKeys: [],
            notBindPage: 1,
            bindPage: 1,
          });
          this.hiddenModal();
          this.getBindEmp();
          this.getNotBindEmp();
        } else {
          message.error(res.data.message || '绑定失败');
          this.hiddenModal();
        }
      })
      .catch((err) => {
        message.error('绑定失败');
        this.hiddenModal();
      });
  };
  onNotBindSelectChange = (notBindRowKeys, notBindRows) => {
    this.setState({ notBindRowKeys, notBindRows });
  };
  onBindSelectChange = (bindRowKeys, bindRows) => {
    this.setState({ bindRowKeys, bindRows });
  };
  notBindChangePage = (notBindPage, notBindPageSize) => {
    this.setState({ notBindPage, notBindPageSize }, () => {
      this.getNotBindEmp();
    });
  };
  bindChangePage = (bindPage, bindPageSize) => {
    this.setState({ bindPage, bindPageSize }, () => {
      this.getBindEmp();
    });
  };
  onSearchSelectChange = (searchSelectedRowKeys, searchSelectedRows) => {
    this.setState({
      searchSelectedRowKeys,
      searchSelectedRows,
    });
  };
  searchTableChange = (page, pageSize) => {
    this.setState({ searchCurrentPage: page }, () => {
      this.searchEmpInfo(this.searchForm.current.getFieldsValue().searchData);
    });
  };
  componentWillMount() {
    if (sessionStorage.getItem('examData')) {
      let examData = JSON.parse(sessionStorage.getItem('examData'));
      this.setState({ examData });
    } else {
      getUrl('/TmfsExam/ExamManagement');
    }
  }
  componentDidMount() {
    this.getNotBindEmp();
    this.getBindEmp();
    this.getReader();
  }
  render() {
    const notBindRowSelection = {
      selectedRowKeys: this.state.notBindRowKeys,
      onChange: this.onNotBindSelectChange,
      getCheckboxProps: (record) => ({
        disabled: record.markingStatus == 1,
        name: record.name,
      }),
    };
    const bindRowSelection = {
      selectedRowKeys: this.state.bindRowKeys,
      onChange: this.onBindSelectChange,
      getCheckboxProps: (record) => ({
        disabled: record.markingStatus == 1,
        name: record.name,
      }),
    };
    const searchRowSelection = {
      selectedRowKeys: this.state.searchSelectedRowKeys,
      onChange: this.onSearchSelectChange,
    };
    //点击行选中单选框
    const handleRow = (record) => {
      return {
        onClick: () => {
          this.setState({
            searchSelectedRowKeys: [record.empNo],
            searchSelectedRows: [record],
          });
        },
      };
    };
    return (
      <div className='examWrap'>
        {/* <div className='examTitle'>阅卷人</div> */}
        <Row wrap={false} gutter={[20, 10]}>
          <Col>
            <Form ref={this.readerForm}>
              <Form.Item
                label='阅卷人'
                name='reader'
                style={{ marginBottom: '0' }}
              >
                <Radio.Group onChange={this.checkReader} buttonStyle='solid'>
                  {this.state.readerList.map((item) => {
                    return (
                      <Radio.Button
                        key={item.empNo}
                        value={item.empNo}
                        style={{ marginBottom: '10px' }}
                      >
                        {item.empName + '（' + item.empNo + '）'}
                      </Radio.Button>
                    );
                  })}
                  {this.state.addReaderList.map((item) => {
                    return (
                      <Radio.Button
                        key={item.empNo}
                        value={item.empNo}
                        style={{ marginBottom: '10px' }}
                      >
                        {item.empName + '（' + item.empNo + '）'}
                      </Radio.Button>
                    );
                  })}
                </Radio.Group>
              </Form.Item>
            </Form>
          </Col>
          <Col>
            <Button onClick={this.showSearchModal}>添加阅卷人</Button>
          </Col>
        </Row>

        {/* <Row gutter={[24, 24]} >
          <Col sm={24} xl={12}> */}
        <div className='examTitle'>未绑定人员</div>
        <div>
          <div>
            <AdvancedSearchForm
              // type='oneItem'
              execSearch={this.execSearch}
              formData={this.state.searchForm}
            />
          </div>
          <div>
            <Row>
              <Col>
                <HasPermi
                  bottonData={{
                    type: 'primary',
                    interceptor:
                      'tmfsExamPlatform:practiceManagement:setReader',
                    clickFn: () => this.showModal(-1, 'bind'),
                    text: '绑定',
                    disabled:
                      this.state.notBindRowKeys.length &&
                      this.state.checkedReader
                        ? false
                        : true,
                  }}
                />
              </Col>
              <Col style={{ textAlign: 'right' }} span={12}></Col>
            </Row>

            <Table
              rowKey='id'
              loading={this.state.notBindTableLoading}
              scroll={{ x: '100' }}
              rowSelection={{ type: 'checkbox', ...notBindRowSelection }}
              columns={this.state.notBindTableCols}
              dataSource={this.state.notBindTableData}
              pagination={{
                total: this.state.notBindTotal,
                pageSize: this.state.notBindPageSize,
                current: this.state.notBindPage,
                showSizeChanger: true,
                onChange: this.notBindChangePage,
                showTotal: (total) => '共 ' + total + ' 条',
              }}
              size='small'
              bordered
            />
          </div>
        </div>
        {/* </Col>
          <Col sm={24} xl={12}> */}
        <div className='examTitle'>已绑定人员</div>
        <div>
          <div>
            <AdvancedSearchForm
              // type='oneItem'
              execSearch={this.bindSearch}
              formData={this.state.searchForm}
            />
          </div>
          <div>
            <HasPermi
              bottonData={{
                type: 'primary',
                interceptor: 'tmfsExamPlatform:practiceManagement:setReader',
                clickFn: () => this.showModal(-1, 'change'),
                text: '重绑阅卷人',
                disabled:
                  this.state.bindRowKeys.length && this.state.checkedReader
                    ? false
                    : true,
              }}
            />
            <Table
              rowKey='id'
              loading={this.state.bindTableLoading}
              scroll={{ x: '100' }}
              rowSelection={{ type: 'checkbox', ...bindRowSelection }}
              columns={this.state.bindTableCols}
              dataSource={this.state.bindTableData}
              pagination={{
                total: this.state.bindTotal,
                pageSize: this.state.bindPageSize,
                current: this.state.bindPage,
                showSizeChanger: true,
                onChange: this.bindChangePage,
                showTotal: (total) => '共 ' + total + ' 条',
              }}
              size='small'
              bordered
            />
          </div>
        </div>
        {/* </Col>
        </Row> */}

        <div>
          <Space>
            <Button
              onClick={() => {
                getUrl('/TmfsExam/PracticeManagement');
              }}
            >
              返回
            </Button>
          </Space>
        </div>
        <NewModal
          modalOptions={{
            width: '400px',
            title: '绑定阅卷人',
            visible: this.state.modalVisible,
            onCancel: this.hiddenModal,
            onOk: this.setReader,
            destroyOnClose: true,
            confirmLoading: this.state.confirmLoading,
          }}
        >
          <InfoCircleOutlined
            style={{
              fontSize: '28px',
              color: '#1890FF',
              float: 'left',
              backgroundColor: '#29F2',
              padding: 8,
              borderRadius: '50%',
            }}
          />
          <div
            style={{
              fontSize: 14,
              marginLeft: 60,
              fontWeight: 700,
              height: 44,
              lineHeight: '44px',
            }}
          >
            {this.state.checkedReader
              ? '绑定阅卷人为  ' +
                this.state.checkedReader.empName +
                '（' +
                this.state.checkedReader.empNo +
                '）？'
              : '绑定选中的阅卷人？'}
          </div>
        </NewModal>
        <NewModal
          modalOptions={{
            width: '1000px',
            visible: this.state.searchEmpModalVisible,
            onCancel: this.hiddenModal,
            destroyOnClose: true,
          }}
          buttonOptions={{
            position: 'center',
            btnList: [
              {
                key: 0,
                onClick: this.checkEmpToReader,
                text: '确认',
                type: 'primary',
              },
              {
                key: 1,
                onClick: this.hiddenModal,
                text: '取消',
              },
            ],
          }}
        >
          <Form style={{ marginTop: 30 }} ref={this.searchForm}>
            <Form.Item
              label='请输入工号/姓名'
              name='searchData'
              rules={[{ required: true, message: '请输入工号/姓名' }]}
            >
              <Input.Search
                maxLength={10}
                loading={this.state.searchLoading}
                placeholder='请输入工号/姓名'
                onSearch={(value) => {
                  this.setState({ searchCurrentPage: 1 }, () => {
                    this.searchEmpInfo(value);
                  });
                }}
              />
            </Form.Item>
          </Form>
          <Table
            bordered
            size='small'
            rowKey='empNo'
            scroll={{ x: '100' }}
            rowSelection={{ type: 'radio', ...searchRowSelection }}
            dataSource={this.state.empInfoList}
            columns={this.state.searchEmpColumns}
            pagination={{
              current: this.state.searchCurrentPage,
              showSizeChanger: false,
              size: 'small',
              total: this.state.searchTotal,
              onChange: this.searchTableChange,
            }}
            onRow={handleRow}
          />
        </NewModal>
      </div>
    );
  }
}
